<template>
  <div class="app-container">
    <!--顶部搜索条件 -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="接口名称" prop="userName">
        <el-input
          v-model="queryParams.apiName"
          placeholder="请输入接口名称"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="接口状态" prop="status">
        <el-select
          v-model="queryParams.status"
          placeholder="请选择接口状态"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="dict in statusSelect"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="创建时间" v-if="advanced">
        <el-date-picker
          v-model="dateRange"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <a @click="toggleAdvanced" style="margin-left: 8px">
          {{ advanced ? '收起' : '展开' }}
          <i v-if="!advanced" class="el-icon-arrow-down"></i>
          <i v-if="advanced" class="el-icon-arrow-up"></i>
        </a>
      </el-form-item>
    </el-form>



  </div>
</template>

<script>
export default {
  name: "api",
  data(){
    return {
      queryParams: {
        apiName: "",
        status: undefined,
        pageNum: 1,
        pageSize: 10
      },
      dateRange: [],
      showSearch:true,
      advanced: false,
      statusSelect: [
        {
          label: "正常",
          value: 1
        },
        {
          label: "停用",
          value: 0
        }
      ]
    }
  },
  methods: {
    handleQuery(){

    },
    toggleAdvanced () {
      this.advanced = !this.advanced
    }
  }
}
</script>

<style scoped>

</style>
